<template>
    <el-dialog :title="dialogTitle" :visible.sync="visible" :show-close="false" width="1000px">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
            <!-- 姓名 -->
            <el-form-item label="姓名：" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>

            <!-- 职务 -->
            <el-form-item label="职务：" prop="post">
                <el-input v-model="form.post" placeholder="请输入职务" />
            </el-form-item>

            <!-- 部门 -->
            <el-form-item label="部门：" prop="department">
                <el-input v-model="form.department" placeholder="请输入部门" />
            </el-form-item>

            <!-- 联系方式 -->
            <el-form-item label="联系方式：" prop="telephone">
                <el-input v-model="form.telephone" placeholder="请输入联系方式" />
            </el-form-item>

            <!-- 是否启用 -->
            <el-form-item label="是否启用：">
                <el-radio-group v-model="form.enable">
                    <el-radio :label="true">启用</el-radio>
                    <el-radio :label="false">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>

        <!-- 操作按钮 -->
        <template #footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { EXPERT_NAME_MAX_LEN, EXPERT_POST_MAX_LEN, EXPERT_DEPARTMENT_MAX_LEN, EXPERT_TELEPHONE } from '@/common/constants';

export default {
    name: "ExpertDialog",
    emits: ["update:visible", "confirm", "cancel"],
    props: {
        /**
         * 是否显示对话框
         * @type {Boolean}
         */
        visible: {
            type: Boolean,
            required: true,
        },

        /**
         * 表单数据
         * @type {Object}
         */
        form: {
            type: Object,
            required: true,
        },

        /**
         * 对话框标题
         * @type {String}
         */
        dialogTitle: {
            type: String,
            default: "弹窗标题",
        },
    },
    data() {
        return {
            /**
             * 表单验证规则
             * @type {Object}
             */
            rules: {
                name: [
                    { required: true, message: "请输入姓名", trigger: "blur" },
                    { max: EXPERT_NAME_MAX_LEN, message: `姓名不能超过${EXPERT_NAME_MAX_LEN}个字符`, trigger: "blur" }
                ],
                post: [
                    { required: true, message: "请输入职务", trigger: "blur" },
                    { max: EXPERT_POST_MAX_LEN, message: `职务不能超过${EXPERT_POST_MAX_LEN}个字符`, trigger: "blur" }
                ],
                department: [
                    { required: true, message: "请输入部门", trigger: "blur" },
                    { max: EXPERT_DEPARTMENT_MAX_LEN, message: `部门不能超过${EXPERT_DEPARTMENT_MAX_LEN}个字符`, trigger: "blur" }
                ],
                telephone: [
                    { required: true, message: "请输入联系方式", trigger: "blur" },
                    { pattern: new RegExp(`^[0-9]{${this.EXPERT_TELEPHONE}}$`), message: `请输入有效的${EXPERT_TELEPHONE}位电话号码`, trigger: "blur" }
                ],
            },
        };
    },
    methods: {
        /**
         * 取消操作
         * @returns {void}
         */
        handleCancel() {
            this.$emit("cancel");
            this.$emit("update:visible", false);
        },

        /**
         * 确认操作
         * @returns {void}
         */
        handleConfirm() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.$emit("confirm", { ...this.form });
                    this.$emit("update:visible", false);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
